<!--
 * @Author: 260156 260156@gree.com.cn
 * @Date: 2022-08-05 14:52:33
 * @LastEditors: 260156 260156@gree.com.cn
 * @LastEditTime: 2022-08-12 16:36:37
 * @FilePath: \gree-zst-web\src\views\manage\role\components\RoleHeader.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 260156 260156@gree.com.cn, All Rights Reserved. 
-->
<template>
  <div class="role-header">
    <div class="role-header-left">
      <label for="">角色</label>
      <el-input
        v-model="roleValue"
        @keyup.enter="handleSearch"
        clearable
      ></el-input>
      <el-button @click="handleSearch" type="primary">查询</el-button>
      <!-- <el-button @click="handleDownload" type="primary">导出</el-button> -->
    </div>
    <div class="role-header-right">
      <el-button @click="handleAdd" type="success" class="role-header-add"
        >新增</el-button
      >
    </div>
  </div>

  <edit-add-form
    v-model="visible"
    flag="add"
    @handleConfirm="handleConfirm"
  ></edit-add-form>
</template>
<script lang="ts" setup>
import EditAddForm from "./EditAddForm.vue";
import { addRole } from "api/manage/manage";
import { ElMessage } from "element-plus";
import { EditForm } from "../types";

interface Props {
  role: string;
}
const props = defineProps<Props>();
interface Emit {
  (e: "update:role", value: string): void;
  (e: "handleSearch"): void;
  // (e: "handleDownload"): void;
}
const emit = defineEmits<Emit>();

const visible = ref<boolean>(false);

const roleValue = computed({
  get: () => props.role,
  set: (val) => {
    emit("update:role", val);
  },
});

const handleSearch = () => {
  emit("handleSearch");
};
// const handleDownload = () => {
//   emit("handleDownload");
// };
const handleAdd = () => {
  visible.value = true;
};
const handleConfirm = (formData: EditForm) => {
  addRole(formData).then((res) => {
    handleSearch();
    visible.value = false;
    ElMessage({
      type: "success",
      message: "添加成功",
    });
  });
};
</script>

<style lang="scss" scoped>
@use "styles/mixins.scss" as *;

.role-header {
  @include setFlex();
  font-size: 14px;

  &-left {
    > label {
      display: inline-block;
      width: 80px;
    }

    :deep(.el-input) {
      width: 160px;
      margin-right: 20px;
    }
  }
}
</style>
